<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <el-card style="width: 100%; margin-top: 20px;">
          <span style="color: #606266">所有分类></span>
          <el-checkbox-group v-model="data.select" style="width: 900px;" @change="getProducts">
            <el-checkbox v-for="(item,index) in category" :label="item.id" :key="index">
              {{item.name}}
            </el-checkbox>
          </el-checkbox-group>
          <el-divider></el-divider>

        <el-row>
            <el-col :span="24">
              <el-row :gutter="20">
                <el-col :span="4" v-for="(item,index) in products" :key="index">
                  <div class="grid-content" style="margin-bottom:10px" @click="toInfo(item.id)">
                    <el-card :body-style="{ padding: '0px',margin: '10px' }">
                      <img :src="item.pic" class="image">
                      <div style="padding: 14px;">
                        <div>{{item.name}}</div>
                        <div style="color: #F40; font-weight: 700">￥{{item.price}}</div>
                      </div>
                    </el-card>
                  </div>

                </el-col>
              </el-row>
            </el-col>
            <!--<p v-if="loading" style="margin-left: 50%" class="el-icon-loading"></p>
            <p v-if="this.data.cur === -1 && this.commodityList.length > 0" style="margin: 0 auto; width: 80px">没有更多了</p>-->
          <!-- </div> -->
        </el-row>

          <!-- <div class="boxs">
            <ul>
              <li v-for="(c,index) in products" :key="index" @click="toInfo(c.id)">
                <div>
                  <div>
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="c.url"
                      fit="fill"></el-image>
                    <div>
                      <span>{{c.name}}</span>
                    </div>
                    <div>
                      <span style="color: #F40; font-weight: 700">￥{{c.price}}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul> -->
            <!--<p v-if="loading" style="margin-left: 50%" class="el-icon-loading"></p>
            <p v-if="this.data.cur === -1 && this.commodityList.length > 0" style="margin: 0 auto; width: 80px">没有更多了</p>-->
          <!-- </div> -->
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getProductCategories, getProducts } from '@/api/product'

export default {
  name: "category",
  data() {
    return {
      category: [
        {
          id: 1,
          name: '零食',
        },
        {
          id: 2,
          name: '面包'
        }
      ],
      data: {
        select: []
      },
      products: [
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
        {
          id: 1,
          name: '卫龙大辣棒',
          price: 5.0,
          url: '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        },
      ]
    }
  },
  created() {
    this.getProductCategories()
    this.getProducts()
  },
  methods: {
    async getProductCategories() {
      const res = await getProductCategories()
      console.log("getProductCategories",res)
      
      // const { product, brand, couponList } = res.data
      this.category = res.data
      // this.hots = hotProductList
      // this.products = productList
    },
    async getProducts() {
      const res = await getProducts(this.data.select)
      console.log("getProducts",res)
      
      // const { product, brand, couponList } = res.data
      this.products = res.data
      // this.hots = hotProductList
      // this.products = productList
    },
    toInfo(id) {
      this.$router.push({path: '/product', query: {id: id}})
    },
    t(){
      console.log(this.data.select)
    }
  }
}
</script>

<style scoped>
  .boxs ul {
    overflow: hidden;
    width: 800px;
    margin-bottom: -10px;
    margin-top: 0;
  }

  .boxs li {
    list-style: none;
    float: left;
    width: 25%; /*可以用百分比*/
    height: 25%; /*可以用百分比*/
    margin-bottom: 10px;
    cursor: pointer;
  }

  .boxs li > div {
    border-radius: 8px;
    text-align: center;
    line-height: 25px;
    /*background: lavenderblush;*/
  }

.grid-content .image {
    width: 100%;
    height: 180px;
    display: block;
  }
</style>
